<template>
    <div class="my-container">
      <div class="nowEchartsU" id="nowEchartsU"></div>
    </div>
  </template>
  <script>
  import * as echarts from "echarts";
  export default {
    name: "powerChangeU",
    data() {
      return {
        oneDay: 1000,
        nowOptions: {
          visualMap: [
            {
              show: false,
              type: "continuous",
              seriesIndex: 0,
              min: 0,
              max: 400,
            },
          ],
          title: {
            left: "center",
            text: "电压消耗实时统计",
          },
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return (
                date.getDate() +
                "/" +
                (date.getMonth() + 1) +
                "/" +
                date.getFullYear() +
                " : " +
                params.value[1]
              );
            },
            axisPointer: {
              animation: false,
            },
          },
          grid: {
            top: "15%",
            bottom: "10%",
          },
          xAxis: {
            type: "time",
            splitLine: {
              show: false,
            },
            triggerEvent: true,
          },
          yAxis: {
            type: "value",
            boundaryGap: [0, "100%"],
            max: 300,
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              type: "line",
              showSymbol: false,
              hoverAnimation: false,
              data: [],
              lineStyle: {
                color: 'blue' // 将图线颜色设置为蓝色
              }
            },
          ],
        },
        myChart: null,
        timer: null,
        data: [],
        temp: 39,
        now: "",
      };
    },
    mounted() {
      this.nowChart();
      this.getData()
    },
    methods: {
      //   初始化图表
      nowChart() {
        let that = this;
        this.now = +new Date()-1000*120;
        var value = Math.random() * 1000;
        for (var i = 0; i < 40; i++) {
          this.now = new Date(+this.now + this.oneDay);
          this.data.push(this.randomData(this.now, value));
        }
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("nowEchartsU"));

        // 绘制图表
        let options = Object.assign(that.nowOptions, {});
        options.series.forEach((item) => {
          item.data = that.data;
          item.markPoint = {
            data: [
              [
                {
                  symbol: "none",
                  x: "95%",
                },
                {
                  symbol: "circle",
                  name: "实时数据",
                  value: this.data[this.temp].value[1],
                  xAxis: this.data[this.temp].value[0],
                },
              ],
            ],
          };
        });
        this.myChart.setOption(options);
        // 1秒定时器
        //   setInterval(() => {
        //     for (var i = 0; i < 1; i++) {
        //       data.shift();
        //       now = new Date(+now + this.oneDay);
        //       data.push(this.randomData(now, value));
        //     }
        //     myChart.setOption(options);
        //   }, 1000);
      },
      // 获取接口返回数据 这里用定时器模拟一秒一个数据
      getData() {
        let that = this;
        var value = Math.random() * 1000;
        this.timer = setInterval(() => {
          for (var i = 0; i < 1; i++) {
            that.data.shift();
            that.now = new Date(+that.now + that.oneDay);
            that.data.push(this.randomData(that.now, value));
          }
          that.updateChart()
        }, 1000);
      },
      //更新图表
      updateChart() {
        let options = Object.assign(this.nowOptions, {});
        options.series.forEach((item) => {
          item.data = this.data;
          item.markPoint = {
            data: [
              [
                {
                  symbol: "none",
                  x: "95%",
                },
                {
                  symbol: "circle",
                  name: "实时数据",
                  value: this.data[this.temp].value[1],
                  xAxis: this.data[this.temp].value[0],
                },
              ],
            ],
          };
        });
        this.myChart.setOption(options);
      },
      // 产生随机数
      randomData(now, value) {
        value = Math.random() * (230-200)+200;
        var valueName =
          now.getFullYear() +
          "/" +
          (now.getMonth() + 1) +
          "/" +
          now.getDate() +
          " " +
          (now.getHours() >= 10 ? now.getHours() : "0" + now.getHours()) +
          ":" +
          (now.getMinutes() >= 10 ? now.getMinutes() : "0" + now.getMinutes()) +
          ":" +
          (now.getSeconds() >= 10 ? now.getSeconds() : "0" + now.getSeconds());
        return {
          name: now.toString(),
          value: [valueName, Math.round(value)],
        };
      },
    },
  };
  </script>
  <style >
  .nowEchartsU {
    width: 100%;
    height: 250px;
  }
  .my-container{
    width:100%;
    height:100%;
    position: relative; /* 设置相对布局 */
  }
  #nowEchartsU{
    width: 100%;
    position:relative;
    margin-top: 10%;
  }
  </style>
